<template>
  <div>
    <el-form :model="tableData" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
      <el-card class="box-card">
        <span>基本信息</span>
        <div class="text item">
          <el-form-item label="经销商名称" prop="dealerId">
            <el-select filterable v-model="tableData.dealerId" placeholder="请选择经销商名称" :disabled="dialogSendData.isAdd">
              <el-option label="请选择经销商名称" value="">
              </el-option>
              <el-option v-for="(item,index) in dealerArray " :label="item.name" :value="item.id" :key="index">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="成交时间" prop="dealTime">
            <el-date-picker :editable="false" v-model="tableData.dealTime" type="datetime" placeholder="选择日期" :disabled="dialogSendData.isAdd">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="上游供应商名称" prop="supplierName">
            <el-input v-model="tableData.supplierName" :maxlength='20' :disabled="dialogSendData.isAdd"></el-input>
          </el-form-item>
          <el-form-item label="上游联系人">
            <el-input v-model="tableData.supplierPerson" :maxlength='10' :disabled="dialogSendData.isAdd"></el-input>
          </el-form-item>
          <el-form-item label="上游联系人电话" prop="supplierPhone">
            <el-input v-model="tableData.supplierPhone" :maxlength='11' :disabled="dialogSendData.isAdd"></el-input>
          </el-form-item>

        <template  v-if="this.dialogSendData.isMsg=='look'" >
             <el-form-item label="创建人">
            <el-input v-model="tableData.addPerson" disabled ></el-input>
          </el-form-item>
           <el-form-item label="创建时间">
            <el-input :value="getDate(tableData.addTime)"  disabled></el-input>
          </el-form-item>
           <el-form-item label="最后修改人">
            <el-input v-model="tableData.lastPerson" disabled></el-input>
          </el-form-item>
           <el-form-item label="最后修改时间">
            <el-input :value="getDate(tableData.laseTime)"  disabled></el-input>
          </el-form-item>
        </template>

        </div>
      </el-card>
      <el-card class="box-card">
        <span>车辆信息</span>
        <div class="text item">
          <Linkage v-if='code' :pinpaiId="tableData.carBrandId" :zipinpaiId="tableData.carSubBrandId" :chexiId="tableData.carSeriesId"
            :chexingId="tableData.carTypeId" :isDisabled=" dialogSendData.isAdd" v-on:receive-brand-data="receiveBrandData"
            formLabelWidth="170px" :carOrderId="dialogSendData.id" level=2></Linkage>

          <el-form-item label="汽车车规" label-width="170px">
            <el-input v-model="specificationName" auto-complete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="指导价(元)" label-width="170px">
            <el-input :value="price|toFixed2" :maxlength='20' disabled></el-input>
            <span class="convertCurrency">{{price|convertCurrency}}</span>
          </el-form-item>
          <el-form-item label="汽车颜色" label-width="170px" prop="color">
            <el-input v-model="tableData.color" :maxlength='20' :disabled='dialogSendData.isAdd'></el-input>
          </el-form-item>
          <el-form-item label="汽车数量" label-width="170px">
            <el-input v-model="tableData.amount" :maxlength='20' disabled></el-input>
          </el-form-item>
          <el-form-item  label="成交单价(元)" label-width="170px" prop="totalPrice">
            <el-input v-number="2"  v-if="this.dialogSendData.isMsg=='look'" :value="tableData.totalPrice|toFixed2" :maxlength='20' :disabled='dialogSendData.isAdd'></el-input>
            <el-input v-number="2"  v-else v-model.number="tableData.totalPrice" :maxlength='20' :disabled='dialogSendData.isAdd'></el-input>
            <span class="convertCurrency">{{tableData.totalPrice|convertCurrency}}</span>
          </el-form-item>
        </div>

      </el-card>

      <el-form-item class='align'>
        <el-button type="primary" @click="resetForm('ruleForm')">返回</el-button>
        <el-button type="success" @click="submitForm('ruleForm')" v-if='!dialogSendData.isAdd'>提交</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  import {
    require,
    prop,
    decimalTwo,
    muchVerification,
    phone
  } from '@/utils/rules.js' //表单验证规则
  import agentHttp from '@/utils/agentHttp.js'
  import {qiniuArray,timestampToTime} from '@/utils/index.js'
  import Linkage from '@/views/brandSelect/linkage.vue'
  export default {
    data() {
      return {
        tableData: {
          "addPerson": "", //创建人
          "addTime": "", //添加时间
          "amount": "", //汽车数量
          "carName": "", //汽车名称
          "color": "", //汽车颜色
          "dealTime": "", //成交时间
          "dealerId": "", //经销商id
          "laseTime": "", //最后修改时间
          "lastPerson": "", //最后修改人
          "orderNumber": "", //订单号
          "supplierName": "", //上游供应商联系名称
          "supplierPerson": "", //上游供应商联系人
          "supplierPhone": "", //上游供应商联系电话
          "totalPrice": "", //成交单价
          carBrandId: "",
        },
        code: null, //选择车 组件是否显示
        specificationName: null,
        price: null,
        dealerArray: [],
        rules: {
          dealerId: [require("经销商名称")],
          dealTime: [require("成交日期")],
          supplierName: [require("上游供应商名称")],
          allocation: [require("配置")],
          supplierPhone: [require('联系人电话'), {
            validator: phone,
            trigger: "change"
          }],
          color: [require("汽车颜色")],
          totalPrice: [require('成交单价'), {
            validator: decimalTwo,
            trigger: "blur"
          }],
        }
      }
    },
    methods: {
      submitForm(formName) { //提交数据
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.dialogSendData.isMsg == "edit") {
              //修改

              agentHttp.putJson(`adminApi/admin/car_order_record/update`, this.tableData).then(data => {
                if (data.success) {
                  this.dialogSendData.isCode = false;
                  this.$message.success(data.data || "增加成功");
                  this.$emit('Refresh', null);
                }
              })
              return
            }
           
            this.tableData.specificationName = this.specificationName;
            this.tableData.price = this.price;
            agentHttp.postJson(`adminApi/admin/car_order_record/add`, this.tableData).then(data => {
              if (data.success) {
                this.dialogSendData.isCode = false;
                this.$message.success(data.data || "增加成功");
                this.$emit('Refresh', null);
              }
            })
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.dialogSendData.isCode = false;
      },
      initData() { //初始化数据
        agentHttp.get(`adminApi/admin/car_order_record/select_by_id/${this.dialogSendData.id}`).then((data) => {
          if (data.success) {
            this.tableData = Object.assign({}, this.tableData, data.data.carOrderRecord);
            this.code = true;
          }
        })
      },
      receiveBrandData(pinpai, zipinpai, chexi, chexing, data) { //依次为 品牌id： 子品牌id:  车系id:  车型id:

        this.$nextTick(() => {
          this.tableData.carBrandId = pinpai;

          this.tableData.carSubBrandId = zipinpai;
          this.tableData.carSeriesId = chexi;
          this.tableData.carTypeId = chexing;
          if (data == "") {} else {
            // 一个bug   子组件emit上来的值，用对象来存储有几率失效 ；
            this.specificationName = data.carSpecificationName;
            this.price = data.price;
          }
        })


      },
      select_get_id(id) { //加载经销商
        agentHttp.get(`adminApi/admin/car_order_record/select_by_id/${this.dialogSendData.id}`).then((data) => {
          if (data.success) {
            this.dealerArray = data.data.dealer
          }
        })
      },
       getDate(time){
        return timestampToTime(time)
      },

    },
    props: {
      dialogSendData: {
        type: Object
      }
    },
    mounted() {
      this.select_get_id(this.dialogSendData.id);
      switch (this.dialogSendData.isMsg) {
        case "edit":
          this.initData()
          break
        case "add":
          this.code = true;
            //添加   汽车数量默认为1
           this.tableData.amount = 1 ;
          break
        case "look":
          this.initData()
        default:
          break;
      }
    },
    components: {
      Linkage
    },
  };
</script>

<style lang="scss" scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    margin-top: 20px;
  }

  .align {
    margin: 50px auto 0;
    text-align: center;
  }
</style>
